<template>
    <div slot="content" class="tg_main_div">
        <el-row class="warp">
            <el-col :span="24" class="warp-breadcrum">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/enterprise/enterprise_list/' }">法律催收</el-breadcrumb-item>
                    <el-breadcrumb-item>合同管理</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
            <el-col :span="24" class="warp-breadcrum">
                <div style="background-color: #FFFFFF">
                    <div class="tit-6">
                        合同信息
                    </div>
                    <div class="tg_test" style="height: 140px;border-top:2px solid #f4f4f5;">
                        <el-row :gutter="36" style="margin: 10px 20px 10px 20px">
                            <el-col :span="6">
                                合同编号：{{ contractVO.contractNbr }}
                            </el-col>
                            <el-col :span="6">
                                出借人：{{ contractVO.lender }}
                            </el-col>
                            <el-col :span="6">
                                借款人：{{ contractVO.borrower }}
                            </el-col>
                            <el-col :span="6">
                                借款本金：{{ contractVO.loanAmount }}
                            </el-col>
                        </el-row>
                        <el-row :gutter="36" style="margin: 10px 20px 10px 20px">
                            <el-col :span="6">
                                借款利率：{{ contractVO.annualRate }}
                            </el-col>
                            <el-col :span="6">
                                逾期本金：{{ contractVO.overdueAmount }}
                            </el-col>
                            <el-col :span="6">
                                逾期违约金：{{ contractVO.overdueFineAmount }}
                            </el-col>
                            <el-col :span="6">
                                处理状态：{{ contractVO.dealStateName }}
                            </el-col>
                        </el-row>
                        <el-row :gutter="36" style="margin: 10px 20px 10px 20px">
                            <el-col :span="6">
                                出借时间：{{ contractVO.lendDate }}
                            </el-col>
                            <el-col :span="6">
                                还款时间：{{ contractVO.repayDate }}
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-col>
            <el-col :span="24" class="warp-breadcrum">
                <el-row>
                    <el-col :span="12">
                        <div style="background-color: #FFFFFF">
                            <div class="tit-6">
                                借款凭证
                            </div>
                            <div class="tg_test"
                                 style="margin-left:35px;line-height:50px;height: 50px;border-top:2px solid #f4f4f5;">
                                {{ contractVO.bankCert}}
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div style="background-color: #FFFFFF;margin-left: 20px">
                            <div class="tit-6">
                                催收文档
                            </div>
                            <div class="tg_test"
                                 style="margin-left:15px;line-height:50px;height: 50px;border-top:2px solid #f4f4f5;">
                                <i class="el-icon-document">
                                    <a>催收文件一</a>
                                </i>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="24" class="warp-breadcrum">
                <div style="background-color: #FFFFFF">
                    <div class="tit-6">
                        合同对象列表
                    </div>
                    <div v-if="contractVO.countMap" class="tg_test" style="height: 110px;border-top:2px solid #f4f4f5;">
                        <el-row :gutter="30" style="margin: 10px 20px 10px 20px">
                            <el-col :span="3">
                                <tg-order-card :orderCount="this.stateCount" describe="总数"></tg-order-card>
                            </el-col>
                            <el-col :span="3">
                                <tg-order-card :orderCount="contractVO.countMap.s0" describe="待审核"></tg-order-card>
                            </el-col>
                            <el-col :span="3">
                                <tg-order-card :orderCount="contractVO.countMap.s1" describe="待制函"></tg-order-card>
                            </el-col>
                            <el-col :span="3">
                                <tg-order-card :orderCount="contractVO.countMap.s2" describe="未通过"></tg-order-card>
                            </el-col>
                            <el-col :span="3">
                                <tg-order-card :orderCount="contractVO.countMap.s3" describe="待递送"></tg-order-card>
                            </el-col>
                            <el-col :span="3">
                                <tg-order-card :orderCount="contractVO.countMap.s4" describe="未送达"></tg-order-card>
                            </el-col>
                            <el-col :span="3">
                                <tg-order-card :orderCount="contractVO.countMap.s5" describe="已送达"></tg-order-card>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-col>
            <el-col class="warp-breadcrum" style="background-color: #FFFFFF">
                <contract-obj-list :contractId="contractId"/>
            </el-col>
        </el-row>


    </div>
</template>

<script>
    import tgOrderCard from '@/components/card/TG_ORDER_CARD'
    import contractAPI from '@/api/api_contract'
    import contractObjList from './contract_obj_list'

    export default {
        name: 'enterprise_order_main',
        components: {tgOrderCard, contractObjList},
        data() {
            return {
                contractVO: {},
                stateCount: 0,
                contractId: ''
            }
        },
        methods: {
            count() {
                var count = 0
                const object = this.contractVO.countMap
                Object.keys(this.contractVO.countMap).forEach(function (it) {
                        count = count + object[it]
                    }
                )
                this.stateCount = count
            }
        },
        created() {
            const id = this.$route.params.id
            this.contractId = id
            const _this = this
            contractAPI.qryContractInfos({id}).then(res => {
                _this.contractVO = res.data
                console.error(res.data)
                _this.count()
            })
        },
        mounted() {
        }
    }
</script>

<style scoped>
</style>